import { useState } from 'react'
import '.././shopping/index.css'
const Index = () => {
  const [days, setday] = useState('李凌轩')
  const [names, setname] = useState('18')
  const [indexs, setindex] = useState(1)
  const [list, setList] = useState([{ day: '王喜悦', name: '18', index: 1 }, { day: '李子鑫', name: '18', index: 2 }, { day: '张芳宇', name: '18', index: 3 }])
  const submit = () => {
    setList([...list, { day: days, name: names, index: indexs }])
  }
  return (
    <div className='index'>
      <div className='box'>
        <div className="boxtop">
          <div className="tops">
            <div className="left" >日期</div>
            <input type="text" value={days} onChange={(e) => setday(e.target.value)} />
          </div>
          <div className="tops">
            <div className="left">标题</div>
            <input type="text" value={names} onChange={(e) => setname(e.target.value)} />
          </div>
          <div className="tops">
            <div className="left" >优先</div>
            <input type="text" value={indexs} onChange={(e) => setindex(e.target.value)} />
          </div>
          <div className="tops">
            <button onClick={submit}>提交</button>
          </div>
        </div>
        <div className="box-bottom">
          <div className="btm">
            <div className="one">日期</div>
            <div className="one">标题</div>
            <div className="one">优先</div>
          </div>
          {
            list.map((item, indexs) => {
              return (
                <div className='btms' key={indexs} >
                  {
                    item.index === 1 ? <div className="btm">
                      <div className="one">{item.day}</div>
                      <div className="one">{item.name}</div>
                      <div className="ones">{item.index}</div>
                    </div> : ''
                  }
                </div>
              )
            })
          }

          {
            list.map((item, indexs) => {
              return (
                <div className='btms' key={indexs} >
                  {
                    item.index === 2 ? <div className="btm">
                      <div className="one">{item.day}</div>
                      <div className="one">{item.name}</div>
                      <div className="oness">{item.index}</div>
                    </div> : ''
                  }
                </div>
              )
            })
          }
          {
            list.map((item, indexs) => {
              return (
                <div className='btms' key={indexs} >
                  {
                    item.index === 3 ? <div className="btm">
                      <div className="one">{item.day}</div>
                      <div className="one">{item.name}</div>
                      <div className="onesss">{item.index}</div>
                    </div> : ''
                  }
                </div>
              )
            })
          }
        </div>
      </div>
    </div >
  )
}

export default Index